<template>
  <el-form :model="formInline" ref="formInline" class="search_prod" label-width="94px">
    <el-form-item :label="item.title" v-for="(item, i) in data" :key="i">
      <el-col :span="24" class>
        <div v-if="item.type == 1" class="tl fx" style="
            line-height: 32px;
            justify-content: flex-start;
            flex-wrap: wrap;
          ">
          <div v-for="(it, k) in item.data" :key="k">
            <div style="width: 430px" class="search-form-line" v-if="it.type == 'date'">
              <div class="search-form-line-left">{{ it.placeholder }}</div>
              <el-date-picker style="width: auto" v-model="it.arr" type="datetimerange" size="small" align="right" unlink-panels clearable value-format="timestamp" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :picker-options="pickerOptions2" @change="onChangeTime($event, it.key)"></el-date-picker>
            </div>
            <div style="width: 300px" class="search-form-line" v-if="it.type == 'date_month'">
              <div class="search-form-line-left">{{ it.placeholder }}</div>
              <el-date-picker style="width: auto" v-model="formInline[it.key]" type="month" placeholder="请选择" size="small" align="right" clearable value-format="timestamp"></el-date-picker>
            </div>
            <div style="width: 300px" class="search-form-line" v-if="it.type == 'week'">
              <div class="search-form-line-left">{{ it.placeholder }}</div>
              <el-date-picker style="width: auto" v-model="formInline[it.key]" type="week" :picker-options="{'firstDayOfWeek': 1}"
               placeholder="请选择" format="yyyy 第 WW 周" size="small" align="right" clearable  value-format="yyyy-MM-dd"></el-date-picker>
            </div>
            <div v-if="it.type == 'checkbox'" style="width: 600px; border: none" class="search-form-line">
              <el-checkbox-group v-model="checkboxs" @change="onchangeCheckBox($event, it.key)">
                <el-checkbox v-for="(ik, l) in it.key" :label="ik.label" :key="l"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div v-if="item.type == 2" class="tl fx" style="
            max-width: 1500px;
            line-height: 32px;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding-right: 26px;
          ">
          <div class="search-form-box" v-for="(it, j) in item.data" :key="j">
            <div v-if="it.type == 'text' && !it.show">
              <el-input size="small" :placeholder="it.placeholder" v-model="formInline[it.key]"></el-input>
            </div>
            <!-- selectTypes -->
            <div v-if="it.type == 'select' && !it.show">
              <el-select v-model="formInline[it.key]" clearable size="small" @change="it.onChange" :placeholder="it.placeholder">
                <el-option v-for="items in it.option" size="small" :key="items.id" :label="items.title" :value="items.id"></el-option>
              </el-select>
            </div>
            <div v-if="it.type == 'selectTypes' && !it.show">
              <el-select v-model="formInline[it.key]" clearable size="small" @change="it.onChange" :placeholder="it.placeholder">
                <el-option v-for="(items, s) in it.option" size="small" :key="s" :label="items.title" :value="items.index" :disabled="items.disabled">
                </el-option>
              </el-select>
            </div>
            <div v-if="it.type == 'select1' && !it.show">
              <el-select v-model="formInline[it.key]" clearable size="small" @change="it.onChange" :placeholder="it.placeholder">
                <el-option v-for="items in it.option" size="small" :key="items" :label="items" :value="items"></el-option>
              </el-select>
            </div>
            <div v-if="it.type == 'select2' && !it.show">
              <el-select v-model="formInline[it.key]" clearable size="small" @change="it.onChange" :placeholder="it.placeholder">
                <el-option v-for="items in it.option" size="small" :key="items.value" :label="items.label" :value="items.value"></el-option>
              </el-select>
            </div>
            <div v-if="it.type == 'select3' && !it.show">
              <el-select v-model="formInline[it.key]" clearable size="small" @change="it.onChange" :placeholder="it.placeholder">
                <el-option v-for="(items, i) in it.option" size="small" :key="i" :label="items.title" :value="items.title"></el-option>
              </el-select>
            </div>
            <div v-if="it.type == 'select4' && !it.show">
              <el-select v-model="formInline[it.key]" clearable size="small" @change="it.onChange" :placeholder="it.placeholder">
                <el-option v-for="(items, i) in it.option" size="small" :key="i" :label="items.title" :value="items.iden"></el-option>
              </el-select>
            </div>
            <div v-if="it.type == 'city'" ref="citysel">
              <city-cascader :is_id="it.is_id" :level="it.level" :checkStrictly="true" @change="handleItemChange($event, it)" />
            </div>
            <div v-if="it.type == 'range' && it.show">
              <el-col :span="24" class="tc">
                <el-col :span="8">
                  <span style="color: #606266">{{ it.placeholder }}&nbsp;</span>
                </el-col>
                <el-col :span="6" class>
                  <el-input v-Int type="text" size="small" clearable v-model="formInline[it.key[0]]"></el-input>
                </el-col>
                <el-col :span="2" class>-</el-col>
                <el-col :span="6" class>
                  <el-input v-Int type="text" size="small" clearable v-model="formInline[it.key[1]]"></el-input>
                </el-col>
              </el-col>
            </div>
            <div v-if="it.type == 'cascader'">
              <el-cascader :options="it.option" :props="it.optionProps" :show-all-levels="false" v-model="op" size="small" style="width: 100%" change-on-select @change="it.onChange" :placeholder="it.placeholder" clearable></el-cascader>
            </div>
          </div>
          <div class="search-form-box" style="width: 250px">
            <el-row class="tl">
              <el-col :span="24">
                <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="subOrderInfo">查询</el-button>
                <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="delOrderInfo('formInline')" v-if="$route.path != '/index/dz/punch_search'">一键清除</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-form-item>
  </el-form>
</template>
<script>
import cityCascader from "@/components/currency/cityCascader/cityCascader";
export default {
  props: {
    toUp: [String],
    down: [String],
    searchData: {
      type: Function,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      radio5: "",
      createTime: [],
      formInline: {},
      rating: [],
      types_option: [],
      op: [],
      data: this.searchData(this),
      checkboxs: [],
    };
  },
  components: {
    cityCascader,
  },
  methods: {
    clearSearch() {
      for (var i in this.formInline) {
        this.formInline[i] = "";
      }
      for (var k in this.data) {
        if (this.data[k].type == "1") {
          for (var j in this.data[k].data) {
            if (this.data[k].data[j].arr) {
              this.data[k].data[j].arr = [];
            }
          }
        } else {
          continue;
        }
      }
      this.checkboxs = [];
    },
    onChangeTime(e, key) {
      if (e) {
        this.$set(this.formInline, key[0], this.$fnc.phptime(e[0]));
        this.$set(this.formInline, key[1], this.$fnc.phptime(e[1]));
      } else {
        this.$set(this.formInline, key[0], "");
        this.$set(this.formInline, key[1], "");
      }
    },
    onchangeCheckBox(e, key) {
      for (var i in key) {
        if (e.indexOf(key[i].label) >= 0) {
          this.$set(this.formInline, key[i].key, key[i].trueLabel);
        } else {
          this.$set(this.formInline, key[i].key, key[i].falseLabel);
        }
      }
    },
    subOrderInfo() {
      this.$emit("sendUserSearch", this.formInline);
    },
    handleItemChange(val, item) {
      console.log(item);
      if (item.is_id == true) {
        //地址选择放回ID
        this.$set(this.formInline, item.key, val[val.length - 1]);
      } else {
        //地址
        val = val || [];
        var keyArr = item.key;
        for (var i = 0; i < keyArr.length; i++) {
          if (val[i]) {
            this.$set(this.formInline, keyArr[i], val[i]);
          } else {
            this.$set(this.formInline, keyArr[i], "");
          }
        }
      }
    },

    delOrderInfo() {
      this.clearSearch();

      this.$emit("sendUserSearch", {});
    },
  },
  mounted() {},
  watch: {
    createTime(val) {
      if (val != null) {
        this.formInline.created_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.created_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.created_time_begin = "";
        this.formInline.created_time_end = "";
      }
    },
    down(val) {
      if (val) {
        if (
          JSON.stringify(this.formInline) == "{}" ||
          this.formInline.t_username == undefined
        ) {
          this.$set(this.formInline, "t_username", val);
          this.$set(this.formInline, "u_username", "");
        } else {
          for (var i in this.formInline) {
            if (i == "t_username") {
              this.$set(this.formInline, "t_username", val);
            } else {
              this.$set(this.formInline, i, "");
            }
          }
        }
      }
    },
    toUp(val) {
      if (val) {
        if (
          JSON.stringify(this.formInline) == "{}" ||
          this.formInline.u_username == undefined
        ) {
          this.$set(this.formInline, "t_username", "");
          this.$set(this.formInline, "u_username", val);
        } else {
          for (var i in this.formInline) {
            if (i == "u_username") {
              this.$set(this.formInline, "u_username", val);
            } else {
              this.$set(this.formInline, i, "");
            }
          }
        }
      }
    },
  },
};
</script>

<style scoped>
.search-form-line {
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
}
.search-form-box {
  margin-bottom: 10px;
}
</style>
